<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css"
        rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css"
        rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css"
        rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/artDialog-6.0.4/css/ui-dialog.css"
        rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/artDialog-6.0.4/dist/dialog-min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script><![endif]-->
</head>

<body class="bg-white" data-bg-color="bg-white">
    <div class="king-page-box">
        <div class="king-layout1-header">
            <nav role="navigation" class="navbar navbar-default king-horizontal-nav3     f14">
                <div class="nav-container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bk-example-navbar-collapse-3">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="javascript:;">
                            <img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo.png" alt=""
                                class="logo"> </a>
                    </div>
                    <div class="collapse navbar-collapse navbar-responsive-collapse" id="bk-example-navbar-collapse-3">
                        <ul class="nav navbar-nav ">
                            <!--<li :class="{'bk-cur':item.active}"  v-for="item in renderData.items">-->
                            <!-- <li> <a href="{{ SITE_URL }}">首页<span></span></a> </li> -->
                            <li class="bk-cur"> <a href="{{ SITE_URL }}">执行任务<span></span></a> </li>
                            <li> <a href="{{ SITE_URL }}task_log">任务记录<span></span></a> </li>
                        </ul>
                        <!-- <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="搜索..."> </div>
                        </form> -->

                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="javascript:;">
                                    <img src="https://magicbox.bk.tencent.com/static_api/v3/components/horizontal_nav3/images/avatar.png"
                                        class="avatar">
                                    <span>管理者 ( admin )</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="king-layout2-main mt15" style="width:960px;">
            <form class="form-horizontal">
                {% csrf_token %}
                <div class="form-group clearfix ">
                    <label class="col-sm-3 control-label bk-lh30 pt0">选择业务：</label>
                    <div class="col-sm-9">
                        <select name="" id="bk_biz" class="form-control bk-valign-top" onchange="search_hosts()">
                            {% for x in data.info %}
                            <option value={{x.bk_biz_id}}>{{x.bk_biz_name}}</option>
                            {% endfor %}
                            <!-- <option value="选择项3">选择项3</option>
                            <option value="选择项4">选择项4</option> -->

                        </select>
                    </div>
                </div>
                <div class="form-group clearfix ">
                    <label class="col-sm-3 control-label bk-lh30 pt0">选择脚本：</label>
                    <div class="col-sm-9">
                        <select name="" id="script_id" class="form-control bk-valign-top">
                            {% for script in scripts %}
                            <option value={{script.id}}>{{script.name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </form>
            <form class="form-horizontal">
                <div class="form-group clearfix">
                    <div class="col-sm-9 col-sm-offset-3">
                        <button type="button" id="execute" class="king-btn mr10  king-success"
                            onclick="fast_execute_script()">执行</button>
                        <!-- <button type="button" class="king-btn king-default ">取消</button> -->
                    </div>
                </div>
            </form>

            <table class="table mb0 pr15 ranger-box2  " id="host_table" onload="search_hosts()">
                <thead>
                    <tr>
                        <th style="width: 60px;"><label><input name="select_all" id="select_all"
                                    type="checkbox"></label></th>
                        <th style="width: 70px;">#</th>
                        <th style="width: 15%;">IP</th>
                        <th style="width: 15%;">操作系统</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td style="width: 60px;"><input type="checkbox"></td>
                        <td style="width: 70px;">1</td>
                        <td style="width: 15%;">10.7.77.77</td>
                        <td style="width: 15%;">CentOS 7.6</td>

                        <td>
                            <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-ok"></i> </button>
                            <button class="btn btn-xs btn-warning"> <i class="glyphicon glyphicon-edit"></i> </button>
                            <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-remove"></i> </button>
                        </td>
                    </tr>  -->
                </tbody>
            </table>
            <template id="header_tpl_15874618175932">
                <tr>
                    <th style="width: 70px;">#index#</th>
                    <th style="width: 15%;">#name#</th>
                    <th style="width: 15%;">#position#</th>
                    <th style="width: 15%;">#date#</th>
                    <th style="width: 15%;">#type#</th>
                    <th>操作</th>
                </tr>
            </template>
            <template id="tpl_15874618175932">
                <tr>
                    <td style="width: 70px;">#index#</td>
                    <td style="width: 15%;">#name#</td>
                    <td style="width: 15%;">#position#</td>
                    <td style="width: 15%;">#date#</td>
                    <td style="width: 15%;">#type#</td>
                    <td>
                        <button class="btn btn-xs btn-success"> <i class="glyphicon glyphicon-ok"></i> </button>
                        <button class="btn btn-xs btn-warning"> <i class="glyphicon glyphicon-edit"></i> </button>
                        <button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-remove"></i> </button>
                    </td>
                </tr>
            </template>
            <!-- 设置面板End -->
            <section>
                <div class="form-group clearfix">
                    <div class="col-sm-offset-3 col-sm-9">
                        <div class="bk-horizontal-line"></div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    
</body>
<script>
    $(function () {
        var li = $('.navbar-nav li');
        li.each(function () {
            $(this).click(function () {
                if ($(this).hasClass('opens') && $(this).find('ul li').length != 0) {
                    $(this).find('ul').slideUp(250);
                    $(this).removeClass('opens');
                } else if ($(this).find('ul li').length != 0) {
                    $(this).find('ul').slideDown(250);
                    $(this).addClass('opens');
                    $(this).siblings('li').removeClass('opens').find('ul').slideUp();
                }
            });
        });

        search_hosts()
    })

    var isCheckAll = false;

    function swapCheck() {
        if (isCheckAll) {
            $("#hosts input[type='checkbox']").each(function () {
                this.checked = false;
            });
            isCheckAll = false;
        } else {
            $("#hosts input[type='checkbox']").each(function () {
                this.checked = true;
            });
            isCheckAll = true;
        }
    }




    // function getCookie(name)
    // {
    // var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    // if(arr=document.cookie.match(reg))
    // return unescape(arr[2]);
    // else
    // return null;
    // }

    // 需要加csrf_token
    function search_hosts() {
        // bk_token = getCookie('bk_token')
        // console.log(bk_token)
        $.ajax({
            url: "search_hosts/",
            type: "post",
            data: {
                "bk_biz_id": $("#bk_biz").val(),
                "csrfmiddlewaretoken": $("input[name='csrfmiddlewaretoken']").val(),
                // "bk_token": bk_token
            },
            success: function (res) {
                if (res.data.result = true && res.data.count > 0) {


                    host_data = res.data.info
                    host_count = res.data.count

                    console.log(host_count)
                    $("#host_table").html("")
                    table_str =
                        '<thead><tr><th style="width: 60px;"><label><input name="select_all" id="select_all" type="checkbox" onclick="swapCheck()"></label></th><th style="width: 70px;">#</th><th style="width: 15%;">IP</th><th style="width: 15%;">操作系统</th><th>操作</th></tr></thead><tbody id="hosts">'
                    for (const index in host_data) {
                        // if (object.hasOwnProperty(key)) {
                        //     const element = object[key];

                        // }
                        table_str = table_str +
                            ' <tr><td style="width: 60px;"><input type="checkbox" name="host_list" value=' +
                            host_data[index].host.bk_host_innerip + '></td><td style="width: 70px;">' +
                            host_data[index].host.bk_host_id + '</td><td style="width: 15%;">' +
                            host_data[index].host.bk_host_innerip + '</td><td style="width: 15%;">' +
                            host_data[index].host.bk_os_name +
                            '</td><td><button class="btn btn-xs btn-danger"> <i class="glyphicon glyphicon-remove"></i> </button></td></tr>'
                        // console.log(bk_host_id+"id"+host_data[1]['bk_host_id'])
                    }
                    table_str = table_str + '</tbody>'
                    $("#host_table").append(table_str)

                } else {
                    $("#host_table").html("")
                    table_str =
                        '<thead><tr><th style="width: 60px;"><label><input name="select_all" id="select_all" type="checkbox"></label></th><th style="width: 70px;">#</th><th style="width: 15%;">IP</th><th style="width: 15%;">操作系统</th><th>操作</th></tr></thead><tbody>'
                    table_str = table_str + '</tbody>'
                    $("#host_table").append(table_str)
                    alert("无数据")
                }
            },
            error: function (res) {
                alert("执行失败")
            }
        })
    }

    // 获取选中行某一列的值
    // function getValue(){
    //     var v=$("input[type='checkbox'][name='host_list']:checked").closest('tr').find('td:eq(2)').map(function(){return this.innerHTML}).get().join();
    //     alert(v)
    // }

    //执行脚本
    function fast_execute_script() {
        bk_biz_id = $("#bk_biz").val()
        bk_biz_name = $("#bk_biz").text()
        script_id = $("#script_id").val()
        obj = document.getElementsByName("host_list");
        host_ips = [];
        for (k in obj) {
            if (obj[k].checked)
                host_ips.push(obj[k].value);
        }
        // alert(host_ids);
        console.log("bk_biz_id:" + bk_biz_id + " script_id:" + script_id + " host_ips:" + host_ips)

        if (host_ips.length != 0) {
            host_ips_j = JSON.stringify(host_ips)
            $.ajax({
                url: "fast_execute_script/",
                type: "post",
                data: {
                    "bk_biz_id": bk_biz_id,
                    "bk_biz_name": bk_biz_name,
                    "script_id": script_id,
                    "host_ips": host_ips_j,
                    "csrfmiddlewaretoken": $("input[name='csrfmiddlewaretoken']").val(),
                },
                success: function (res) {
                    if (res.result) {
                        // alert("sucess!")
                        // 成功提示
                        var d = dialog({
                            width: 260,
                            title: '提示',
                            ok: function () {
                                window.location.href = "{{ SITE_URL }}task_log"
                            },
                            okValue: '查看执行结果',
                            content: '<div class="king-notice-box king-notice-success"><p class="king-notice-text">任务执行成功！</p></div>',
                            cancelValue: '继续执行任务',
                            cancel: function () {}
                        });
                        d.show();
                    } else {
                        var d = dialog({
                            width: 260,
                            title: '提示',
                            cancel: function () {},
                            ok: function () {},
                            okValue: '确定',
                            content: '<div class="king-notice-box king-notice-fail"><p class="king-notice-text">任务执行失败！</p><p class="king-notice-text">Message: '+res.message+'</p></div>',
                            cancelValue: '取消',
                            cancel: function () {
                                // do something
                            }
                        });
                        d.show();
                    }
                },
                error: function (res) {
                    alert("执行失败！")
                }
            })
        } else {
            alert("请至少选择一个主机！")
        }
    }
</script>
</html>